<template>
	<!-- 上传图片 -->
	<view class="">
		<view class="showimg_box">
			<view class="show_img" @click="ChooseImage">
				<image src="https://fangguaner.wm76.mtnet.ren/static/applet/+.png" class="add"></image>
			</view>
			<view v-for="(item,index) in imgList" :key="index" class=" imgarr">
				<image src="https://fangguaner.wm76.mtnet.ren/static/applet/close.png" mode="" class="icon-cuo" @tap="delect(index)"></image>
				<image class="add" :src="item.url" @click="lookImg(index)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imgList: {
				type: Array,
				default: []
			},
			imgMaxNum: {
				type: Number,
				default: 1
			},
		},
		methods: {
			ChooseImage() {
				var _this = this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: (res) => {
						var tempFilePaths = res.tempFilePaths;
						if (_this.imgList.length + tempFilePaths.length > _this.imgMaxNum) {
							uni.showToast({
								title: '超过上传图片的最大数量',
								icon: 'none'
							})
						} else {
							
							for (var i = 0; i < tempFilePaths.length; i++) {
								let timestamp = new Date().getTime();
								// let enMsg = hex_md5('@' + hex_md5('@' + timestamp + '~') + '~');
								uni.uploadFile({
									// url: this.adminIp + 'Interface/Interface/UploadImg',//上传的服务器地址
									url: 'https://fangguaner.wm76.mtnet.ren/api/UploadFile/index', //上传的服务器地址
									filePath: tempFilePaths[i],
									method: 'POST',
									name: "file",
									formData: {
										timestamp: timestamp,
										token: uni.getStorageSync("token")
									},
									success: res => {
										let img = JSON.parse(res.data).data
										this.$emit('successImg', JSON.parse(res.data).data)
									}
								});
							}
						}
					}
				});
			},
			//查看图片
			lookImg: function(index) {
				let urls = this.imgList.map(v=>{
					return v.url
				})
				uni.previewImage({
					urls: urls,
					current: urls[index]
				})
			},
			delect(index) {
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片",
					success: (res) => {
						if (res.confirm) {
							this.$emit('deleteImg', index)
						}
					}
				})
			},
		}
	}
</script>

<style>
	.showimg_box {
		display: flex;
		flex-wrap: wrap;
		/* margin-top: 20rpx; */
	}

	.show_img {
		width: 140rpx;
		height: 140rpx;
		border: 2rpx dashed #eee;
		/* margin: 20rpx 0; */
		z-index: 9999;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.images {
		width: 140rpx;
		height: 14rupx;
		z-index: 999;
	}

	.imgarr {
		display: flex;
		align-items: center;
		position: relative;
		/* margin: 0 10rpx; */
		margin-left: 15rpx;
		margin-bottom: 15rpx;
	}

	.icon-cuo {
		position: absolute;
		right: -9rpx;
		top: -13rpx;
		z-index: 10009;
		border-radius: 50%;
		width: 36rpx;
		height: 36rpx;
	}

	.add {
		width: 140rpx;
		height: 140rpx;
	}
</style>
